<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Progress Bar</title>
    <style>
        body { margin: 0; padding: 0; }
        #container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
<div id="container">
    <canvas id="myCanvas" width="300" height="40"></canvas>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // 设置进度条参数
    const progress = 0.75; // 0 到 1 之间的值
    const borderRadius = 10;
    const borderWidth = 2;
    const borderColor = "#000";
    const backgroundColor = "#eee";
    const foregroundColor = "#0099cc";

    // 进度条尺寸
    const barWidth = canvas.width - 2 * borderRadius;
    const barHeight = canvas.height - 2 * borderRadius - 2 * borderWidth;

    drawProgressBar();

    function drawProgressBar() {
      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制背景边框
      drawRoundedRect(ctx, borderRadius, borderRadius, canvas.width - 2 * borderRadius, canvas.height - 2 * borderRadius, borderRadius, borderColor);

      // 绘制背景
      drawRoundedRect(ctx, borderRadius + borderWidth, borderRadius + borderWidth, barWidth, barHeight, borderRadius, backgroundColor);

      // 计算前景宽度
      const progressWidth = barWidth * progress;

      // 绘制前景
      drawRoundedRect(ctx, borderRadius + borderWidth, borderRadius + borderWidth, progressWidth, barHeight, borderRadius, foregroundColor);
    }

    function drawRoundedRect(ctx, x, y, w, h, r, color) {
      ctx.beginPath();
      ctx.moveTo(x + r, y);
      ctx.lineTo(x + w - r, y);
      ctx.quadraticCurveTo(x + w, y, x + w, y + r);
      ctx.lineTo(x + w, y + h - r);
      ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
      ctx.lineTo(x + r, y + h);
      ctx.quadraticCurveTo(x, y + h, x, y + h - r);
      ctx.lineTo(x, y + r);
      ctx.quadraticCurveTo(x, y, x + r, y);
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
    }
  });
</script>
</body>
</html>
